<template>
  <div>
    <van-nav-bar title="司机接单" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div v-for="(item,index) in plugins" :key="index" class="box-ding">
      <van-panel :title="'订单号：'+item.rand" :desc="'时间：'+item.timer" status="￥38.0">
        <div>
          <van-cell :title="'客人位置：'+item.addrs" icon="location" />
          <van-cell :title="'客人的目的地：'+item.what" icon="smile" />
        </div>
        <template #footer>
          <van-row>
            <van-col offset="18" span="12">
              <van-button @click="vitas(index)" size="small" type="danger">立即抢订单</van-button>
            </van-col>
          </van-row>
        </template>
      </van-panel>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
      <div class="box-bottm">
        <van-cell-group>
          <van-cell :title="'客人位置：'+tittle" value />
          <van-cell :title="'客人的目的地：'+bittle" value />
          <van-cell title="系统提示" value label="请注意客人位置和目的地..." />
        </van-cell-group>
        <div style="display:flex">
          <van-button size="large" @click="shows" color="#7232dd">放弃</van-button>
          <van-button
            size="large"
            @click="pshed"
            color="linear-gradient(to right, #ff6034, #ee0a24)"
          >继续</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState } from "vuex";
export default {
  data() {
    return {
      show: false,
      tittle: "",
      bittle: "",
      vlu: false
    };
  },
  methods: {
    onClickLeft() {
      Toast("返回");
      this.$router.back();
    },
    vitas(index) {
      this.tittle = this.$store.state.plugins[index].addrs;
      this.bittle = this.$store.state.plugins[index].what;
      Toast.loading({
        message: "加载中...",
        forbidClick: true
      });
      setTimeout(() => {
        this.show = true;
      }, 2000);
    },
    shows() {
      this.show = false;
    },
    pshed() {
      this.$store.commit("setdiltes", this.$store.state.plugins[this.index]);
      this.$store.state.plugins.splice(this.index, 1);
      this.$router.push("/ji");
    }
  },
  computed: {
    ...mapState(["plugins"])
  }
};
</script>

<style lang="scss" scoped>
.box-ding {
  width: 90%;
  height: 100%;
  box-shadow: 0 0 3px 0 black;
  margin: 20px auto;
  overflow: hidden;
}
.box-bottm {
  width: 95%;
  //   height: 200px;
  margin: 0 auto;
}
</style>